<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <title>聊天室</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <script  type="text/javascript">
        var ws;
        var wsUri = "ws://localhost:9999/RookieSocialNetworking/echo";
        ws = new WebSocket(wsUri);
        var n='${sessionScope.userName}';
        ws.onopen = function(){
            ws.send(n);//在服务端必须由OnMessage接收此消息
        };

        //处理连接后的信息处理  session.getBasicRemote().sendText(message);
        //接收服务器返回的数据
        ws.onmessage = function(message){
            writeToScreen(message.data);
        };
        //对发送按钮进行监听，获取发送的信息和发送对象
        function button(){
            message = document.getElementById('in').value;
            towho = document.getElementById('towho').value + "@";
            ws.send(towho+message);
        }

        //发生错误时，处理错误
        ws.onerror = function (evt){
            writeToScreen('<span style="color:red;">ERROR:</span>'+evt.data);
            ws.close();
        };

        //把信息显示到当前屏幕
        function writeToScreen(message){
            var pre = document.createElement("p");
            pre.style.wordWrap = "break-word";
            pre.style.marginRight="10px";
            pre.innerHTML = message;
            output.appendChild(pre);
        }

        //当关闭页面时执行ws.close
        window.onbeforeunload=function (){
            ws.close();
        };
    </script>
</head>

<body>
<div style="border: 1px solid;width:100%;height: 900px;background-image: url('${pageContext.request.contextPath}/style/image/bg3.jpg') ;background-repeat:no-repeat" >
    <p style="height: 50px"></p>
    <p style="border: 1px solid;width: 1000px;height:70px;clear: both;margin-left: 500px;text-align: center"><font color="white" size="70px" style="text-indent: 30px">聊天区</font></p>

<div style="margin-left: 500px;width:800px;height:560px;float:left; overflow:scroll; border:1px solid; background-image: url('${pageContext.request.contextPath}/style/image/bg4.jpg') ;" id="output" > </div>
<div style="width:200px;height: 560px;float:left;border: 1px solid;background-image: url('${pageContext.request.contextPath}/style/image/bg4.jpg') ;">
    <p style="background:lightskyblue;">好友上线列表</p>

    <ul class="row">
       <%-- <li></li>--%>
    </ul>

</div>
 <div style="border: 1px solid;width: 1000px;clear: both;margin-left: 500px">
    <form action="">
        <input id="in" name="message" value="" type="text" style="width:400px;height:30px;  border:1px solid; " >
        发送对象：
        <input id="towho"style="width:400px;height:30px;" name="towho" value="all">

        <input onclick="button()" value="发送" style="height: 30px;width: 50px" class="badge-danger" type="button"/>
        <br>
    </form>
</div>
</div>
</body>

<script type="text/javascript" src="${pageContext.request.contextPath}/style/js/jquery.min.js"></script>
<script>
    $(function(){
        alert("进入ajax");
        $.ajax({
            url:"${pageContext.request.contextPath}/FriendController/queryfirend",
            type:"GET",
            dataType:"JSON",
            success:function(data){
                var content="";
                $.each(data,function (index,obj) {
                    content+="<p style='text-align: center;'>"+obj.friend.userName+"</p>";
                })
                $(".row").html(content);
            },
            error:function () {
                alert("请求失败")
            }
        })
    })
</script>
</html>
